import index from './index.vue';
import { createApp, reactive } from 'vue';
import style from './index.module.scss';
/* const popup = {
  install(app, options) {
    app.component ('Popup', index)
  }
} */
/**
 * Represents a book.
 * @param {object | string} options - 可以为对象，也可以是一段简单的文字
 * @param {vueComponent} _options.vCom - 传递内容组件
 * @param {HTMLElement} _options.hCom - 传递内容组件
 */

const state = reactive({
  close: null,
  isShowButton: null,
  title: null,
  text: null,
  handleLeftButton: null,
  leftButtonText: null,
  handleRightButton: null,
  rightButtonText: null,
});

const toastCom = () => {
  return (
    <div className={style.toast}>
      <div onClick={state.close} className={style.modal}></div>
      <div className={style.card}>
        {state.isShowButton && (
          <div onClick={state.close} className={style.close}>
            x
          </div>
        )}
        <div className={style.title}>{state.title}</div>
        <div className={style.text}>{state.text}</div>
        {state.isShowButton && (
          <div className={style.button_wrap}>
            <div onClick={state.handleLeftButton} className={style.button}>
              {state.leftButtonText || '取消'}
            </div>
            <div onClick={state.handleRightButton} className={style.button}>
              {state.rightButtonText || '确认'}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

let timeout = null;
let div = null;

const $toast = options => {
  return new Promise((resolve, reject) => {
    const defaultOption = {
      title: '提醒',
      text: '是否确认操作',
      during: 0,
      leftButtonText: '',
      rightButtonText: '',
      handleLeftButton: () => {},
      handleRightButton: () => {},
      isShowButton: true,
    };
    const opKeys = Object.keys(options);
    Object.keys(defaultOption).map(k => {
      state[k] = defaultOption[k];
      if (opKeys.find(op_key => op_key === k)) {
        state[k] = options[k];
      }
    });

    state.close = () => {
      if (!div) return;
      document.body.removeChild(div);
      div = null;
      clearTimeout(timeout);
      resolve('close');
    };
    if (div) {
      clearTimeout(timeout);
      timeout = setTimeout(state.close, state.during);
      return;
    }
    div = document.createElement('div');
    div.id = 'toast_wrap';
    document.body.appendChild(div);
    const leftClick = state.handleLeftButton;
    const rightClick = state.handleRightButton;
    let clickedButton = '';
    state.handleLeftButton = () => {
      leftClick && leftClick();
      resolve('clickLeft');
      state.close();
    };
    state.handleRightButton = () => {
      rightClick && rightClick();
      resolve('clickRight');
      state.close();
    };

    createApp(toastCom, state).mount(div);
    if (state.during) {
      timeout = setTimeout(state.close, state.during);
    }
  });
};

const Toast = {
  install(app, options) {
    app.config.globalProperties.$toast = $toast;
    app.component(toastCom, 'Toast');
  },
};

export default Toast;
export { $toast };
